add ripple config object to Pressable by vonovak · Pull Request #28156 · facebook/react-native

vonovak · 2020-02-22T14:10:39Z

Summary

Motivation is to support ripple radius just like in TouchableNativeFeedback, plus borderless attribute. See #28009 (comment)

In the current form this means user needs to pass an android_ripple prop which is an object of this shape:

export type RippleConfig = {|
  color?: ?ColorValue,
  borderless?: ?boolean,
  radius?: ?number,
|};

Do we want to add methods that would create such config objects - https://facebook.github.io/react-native/docs/touchablenativefeedback#methods ?

Changelog

[Android] [Added] - support borderless and custom ripple radius on Pressable

Test Plan

Tested locally in RNTester. I noticed that when some content is rendered after the touchables, the ripple effect is "cut off" by the boundaries of the next view. This is not specific to Pressable, it happens to TouchableNativeFeedback too but I just didn't notice it before in #28009. As it is an issue of its own, I didn't investigate that.

I changed the Touchable example slightly too (I just moved the "custom ripple radius" up to show the "cutting off" issue), so just for completeness:

analysis-bot · 2020-02-22T14:28:56Z

RNTester (Android/hermes/arm64-v8a): 3291136 bytes
RNTester (Android/hermes/armeabi-v7a): 3131392 bytes
RNTester (Android/hermes/x86): 3463168 bytes
RNTester (Android/hermes/x86_64): 3426304 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4360192 bytes
RNTester (Android/jsc/x86_64): 4646912 bytes

analysis-bot · 2020-02-22T14:31:51Z

RNTester.app (iOS): 10727424 bytes

analysis-bot · 2020-02-22T20:21:11Z

RNTester (Android/hermes/arm64-v8a): 3291136 bytes
RNTester (Android/hermes/armeabi-v7a): 3131392 bytes
RNTester (Android/hermes/x86): 3463168 bytes
RNTester (Android/hermes/x86_64): 3426304 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4360192 bytes
RNTester (Android/jsc/x86_64): 4646912 bytes

analysis-bot · 2020-02-22T20:24:12Z

RNTester.app (iOS): 10657792 bytes

elicwhite

Thanks for doing this! Just a couple nits

analysis-bot · 2020-02-23T20:38:42Z

RNTester (Android/hermes/arm64-v8a): 3291136 bytes
RNTester (Android/hermes/armeabi-v7a): 3131392 bytes
RNTester (Android/hermes/x86): 3463168 bytes
RNTester (Android/hermes/x86_64): 3426304 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4360192 bytes
RNTester (Android/jsc/x86_64): 4646912 bytes

facebook-github-bot

@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

analysis-bot · 2020-02-24T20:44:30Z

RNTester (Android/hermes/arm64-v8a): 3291136 bytes
RNTester (Android/hermes/armeabi-v7a): 3131392 bytes
RNTester (Android/hermes/x86): 3463168 bytes
RNTester (Android/hermes/x86_64): 3426304 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4360192 bytes
RNTester (Android/jsc/x86_64): 4646912 bytes

analysis-bot · 2020-02-24T20:46:19Z

RNTester.app (iOS): 10657792 bytes

facebook-github-bot

@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

analysis-bot · 2020-03-05T22:50:50Z

RNTester (Android/hermes/arm64-v8a): 3291136 bytes
RNTester (Android/hermes/armeabi-v7a): 3131392 bytes
RNTester (Android/hermes/x86): 3463168 bytes
RNTester (Android/hermes/x86_64): 3426304 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4360192 bytes
RNTester (Android/jsc/x86_64): 4646912 bytes

analysis-bot · 2020-03-05T22:55:42Z

RNTester.app (iOS): 10657792 bytes

facebook-github-bot

@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

facebook-github-bot

@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

elicwhite · 2020-03-17T23:43:13Z

Heads up @kikisaints that we are working on landing this change to the Pressable API.

react-native-bot · 2020-04-04T01:40:05Z

This pull request was successfully merged by @vonovak in bd38686.

^{When will my fix make it into a release? | Upcoming Releases}

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 22, 2020

react-native-bot added Platform: Android Android applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Feb 22, 2020

vonovak marked this pull request as ready for review February 22, 2020 20:34

vonovak requested a review from elicwhite February 22, 2020 20:34

elicwhite reviewed Feb 22, 2020

View reviewed changes

Comment thread Libraries/Components/Pressable/useAndroidRippleForView.js Outdated

Comment thread Libraries/Components/Pressable/useAndroidRippleForView.js Outdated

vonovak requested a review from elicwhite February 23, 2020 20:28

facebook-github-bot reviewed Feb 24, 2020

View reviewed changes

elicwhite requested changes Feb 24, 2020

View reviewed changes

Comment thread Libraries/Components/Pressable/useAndroidRippleForView.js Outdated

Comment thread Libraries/Components/Pressable/useAndroidRippleForView.js Outdated

vonovak force-pushed the rippleCustomizationForPressable branch from 4ec8985 to 320effc Compare February 24, 2020 20:23

vonovak requested a review from elicwhite February 24, 2020 20:49

facebook-github-bot reviewed Mar 2, 2020

View reviewed changes

elicwhite reviewed Mar 5, 2020

View reviewed changes

Comment thread Libraries/Components/Pressable/useAndroidRippleForView.js Outdated

facebook-github-bot reviewed Mar 5, 2020

View reviewed changes

vonovak added 4 commits March 18, 2020 00:22

add ripple config object to Pressable

1a0712c

reverse examples

684fce9

fix eslint

c624426

use explicit condition

d44beb5

vonovak force-pushed the rippleCustomizationForPressable branch from 2452982 to d44beb5 Compare March 17, 2020 23:30

facebook-github-bot reviewed Mar 17, 2020

View reviewed changes

facebook-github-bot closed this in bd38686 Apr 4, 2020

react-native-bot added the Merged This PR has been merged. label Apr 4, 2020

Conversation

vonovak commented Feb 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

Test Plan

Uh oh!

analysis-bot commented Feb 22, 2020

Uh oh!

analysis-bot commented Feb 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot commented Feb 22, 2020

Uh oh!

analysis-bot commented Feb 22, 2020

Uh oh!

elicwhite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

analysis-bot commented Feb 23, 2020

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

analysis-bot commented Feb 24, 2020

Uh oh!

analysis-bot commented Feb 24, 2020

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

analysis-bot commented Mar 5, 2020

Uh oh!

analysis-bot commented Mar 5, 2020

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

elicwhite commented Mar 17, 2020

Uh oh!

react-native-bot commented Apr 4, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vonovak commented Feb 22, 2020 •

edited

Loading

analysis-bot commented Feb 22, 2020 •

edited

Loading